<template>
  <div class="share">
    <el-main>
      <div style="position: fixed;right: 20px;">
        <el-button type="primary" @click="loadPdf" :loading="PdfType">导出word</el-button>
        <el-button type="primary" @click="loadPdf2" :loading="PdfType2">导出pdf</el-button>
      </div>
      <div class="box">
        <div class="itemBox" ref="pdfBox">
          <div class="question">
            <div class="titleBig">背景调查报告</div>
            <div class="company_title">{{ companyInfos.company }}</div>
            <div class="time">生成时间：{{ companyInfoIndustry.update_time }}</div>

            <div class="title">1、工商信息</div>

            <div v-if="PdfType">
              <div>
                <table  class="tableTd">
                  <tr class="infoTr">
                    <th colspan="2" class="infoTb2">
                      <div class="leftTitle2">企业评分:</div>
                    </th>
                  </tr>

                  <tr class="infoTr" style="margin-bottom: 10px;">
                    <td colspan="2" class="infoTb" style="padding: 20px;">
                      {{ data.percentileScore }}
                      <span v-for="item in tags" :key="item + '企业评分'">
                        <span class="b_bule">{{
                          item
                        }}、</span>
                      </span>
                    </td>
                  </tr>


                  <tr class="infoTr" style="margin-bottom: 10px;">
                    <td class="infoTb">
                      <div class="leftTitle">法定代表人:</div>
                      {{ data.legalPersonName }}
                    </td>
                    <td class="infoTb">
                      <div class="leftTitle">成立时间:</div>
                      {{ data.estiblishTime | time }}
                    </td>
                  </tr>

                  <tr class="infoTr" style="margin-bottom: 10px;">
                    <td class="infoTb">
                      <div class="leftTitle">登记状态:</div>
                      {{ data.regStatus }}
                    </td>
                    <td class="infoTb">
                      <div class="leftTitle">注册资本:</div>
                      {{ data.regCapital }}
                    </td>
                  </tr>

                  <tr class="infoTr" style="margin-bottom: 10px;">
                    <td class="infoTb">
                      <div class="leftTitle">实缴资本:</div>
                      {{ data.actualCapital }}
                    </td>
                    <td class="infoTb">
                      <div class="leftTitle">参保人数:</div>
                      {{ data.socialStaffNum }}
                    </td>
                  </tr>


                  <tr class="infoTr" style="margin-bottom: 10px;">
                    <td colspan="2" class="infoTb">
                      <div class="leftTitle">企业类型:</div>
                      {{ data.companyOrgType }}
                    </td>
                  </tr>

                  <tr class="infoTr" style="margin-bottom: 10px;">
                    <td colspan="2" class="infoTb">
                      <div class="leftTitle">登记机关:</div>
                      {{ data.regInstitute }}
                    </td>

                  </tr>

                  <tr class="infoTr" style="margin-bottom: 10px;">
                    <td colspan="2" class="infoTb">
                      <div class="leftTitle">注册地址:</div>
                      {{ data.regLocation }}
                    </td>
                  </tr>

                  <tr class="infoTr" style="margin-bottom: 10px;">
                    <td  class="infoTb">
                      <div class="leftTitle">人员规模:</div>
                      {{ data.staffNumRange }}
                    </td>
                    <td width="50%" class="infoTb">
                      <div class="leftTitle">组织机构代码:</div>
                      {{ data.orgNumber }}
                    </td>

                  </tr>
                  <tr class="infoTr" style="margin-bottom: 10px;">
                    <td colspan="2" class="infoTb">
                      <div class="leftTitle">统一社会信用代码:</div>
                      {{ data.creditCode }}
                    </td>
                  </tr>

                  <tr class="infoTr" style="margin-bottom: 10px;">
                    <td colspan="2" class="infoTb">
                      <div class="leftTitle">纳税人识别号:</div>
                      {{ data.taxNumber }}
                    </td>
                  </tr>

                  <tr class="infoTr" style="margin-bottom: 10px;">
                    <td colspan="2" class="infoTb">
                      <div class="leftTitle">工商注册号:</div>
                      {{ data.regNumber }}
                    </td>
                  </tr>

                  <tr class="infoTr" style="margin-bottom: 10px;">
                    <td colspan="2" class="infoTb">
                      <div class="leftTitle">英文名:</div>
                      {{ data.property3 }}
                    </td>
                  </tr>
                  <tr class="infoTr" style="margin-bottom: 10px;">
                    <td colspan="2" class="infoTb">
                      <div class="leftTitle">曾用名:</div>
                      {{ data.historyNames }}
                    </td>
                  </tr>
                  <tr class="infoTr" style="margin-bottom: 10px;">
                    <td colspan="2" class="infoTb">
                      <div class="leftTitle">所属行业:</div>
                      {{ data.industry }}
                    </td>
                  </tr>
                 
                  <tr class="infoTr">
                    <th colspan="2" class="infoTb2">
                      <div class="leftTitle2">经营范围:</div>
                    </th>
                  </tr>

                  <tr class="infoTr" style="margin-bottom: 10px;">
                    <td colspan="2" class="infoTb" style="padding: 20px;">
                      {{ data.businessScope }}
                    </td>
                  </tr>
                </table>
                <div style="border-bottom: 3px solid rgb(244, 245, 247);margin:20px 0 ;color:#f4f5f7">-</div>
                <table   class="tableTd">
                  <tr class="infoTr" style="margin-bottom: 10px;">
                    <td class="infoTb">
                      <div class="leftTitle">邮箱:</div><span class="infoS">{{ companyInfos.email }}</span>
                    </td>
                    <td class="infoTb">
                      <div class="leftTitle">联系人:</div><span class="infoS">{{ companyInfos.username }}</span>
                    </td>
                  </tr>
                  <tr class="infoTr" style="margin-bottom: 10px;">
                    <td class="infoTb">
                      <div class="leftTitle">联系方式:</div><span class="infoS">{{ companyInfos.mobile }}</span>
                    </td>
                    <td class="infoTb">
                      <div class="leftTitle">所属区域:</div><span class="infoS">{{ companyInfos.street_name }}</span>
                    </td>
                  </tr>
                  <tr class="infoTr" style="margin-bottom: 10px;">
                    <td class="infoTb">
                      <div class="leftTitle">是否支持走访:</div><span class="infoS">{{ companyInfos.is_support_visit == 1 ?
                        '支持走访' : '拒绝走访'
                      }}</span>
                    </td>
                    <td class="infoTb">
                      <div class="leftTitle">公司类型:</div><span class="infoS">{{ companyInfos.company_type == 1 ? '企业' :
                        '机构' }}</span>
                    </td>
                  </tr>
                  <!-- <tr class="infoTr" style="margin-bottom: 10px;">
                    
                  </tr> -->
                  <tr class="infoTr" style="margin-bottom: 10px;">
                    <td class="infoTb" colspan="2">
                      <div class="leftTitle">荣誉标签:</div>
                      <div v-if="infodata.label" style="display: inline-block;">
                        <div  style="display: inline-block;" v-for="(item, index) in infodata.label.one">
                          <span class="b_bule">
                            {{ item.honor.name }}
                          </span>
                        </div>
                        <div  style="display: inline-block;" v-for="(item, index) in infodata.label.three">
                          <span class="b_bule">{{
                            item.name
                          }}</span>
                        </div>
                        <div  style="display: inline-block;" v-for="(item, index) in infodata.label.two">
                          <span class="b_bule">{{
                            item.name
                          }}</span>
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr class="infoTr" style="margin-bottom: 10px;">
                    <td class="infoTb" colspan="2">
                      <div class="leftTitle">企业标签:</div>
                      <div v-if="infodata.label" style="display: inline-block;">
                        <div v-for="(item, index) in infodata.label.service_label">
                          <span class="b_color">
                            {{ item.title }}
                          </span>
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr class="infoTr" style="margin-bottom: 10px;">
                    <td class="infoTb" colspan="2">
                      <div class="leftTitle">需求标签:</div>
                      <div v-if="infodata.label" style="display: inline-block;">
                        <div v-for="(item, index) in infodata.label.ttt_label.true_get">
                          <span class="b_red2">
                            {{ item.name }}
                          </span>
                        </div>
                        <div v-for="(item, index) in infodata.label.ttt_label.false_get">
                          <span class="b_red">
                            {{ item.name }}
                          </span>
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr class="infoTr" style="margin-bottom: 10px;">
                    <td class="infoTb" colspan="2">
                      <div class="leftTitle">贯标情况:</div>
                      <div style="display: inline-block;" v-if="companyInfos.label_type == 1">
                        <span class="b_bule">
                          未做贯标
                        </span>
                      </div>
                      <div style="display: inline-block;" v-if="companyInfos.label_type == 2">
                        <span class="b_bule">
                          已做贯标({{ companyInfos.endDate }})
                        </span>
                      </div>
                      <div style="display: inline-block;" v-if="companyInfos.label_type == 3">
                        <span class="b_bule">
                          贯标到期({{ companyInfos.endDate }})
                        </span>
                      </div>
                    </td>
                  </tr>
                </table>
              </div>
            </div>

            <businessInfo v-if="!PdfType" :infodata="infodata" :tokenIfon="tokenIfon" :companyInfos="companyInfos"
              :data="data" :tags="tags" :type="type" :status_update="status_update"
              :companyInfoIndustry="companyInfoIndustry" :updataType="false" :preview="true"></businessInfo>

            <div class="title">2、企业荣誉</div>
            <enterpriseHonor :PdfType="PdfType" :honor_know="honor_know" :companyInfoIndustry="companyInfoIndustry">
            </enterpriseHonor>
            <div class="title">3、专利分析</div>
            <patent :preview="true" :PdfType="PdfType" :companyInfoIndustry="companyInfoIndustry"></patent>
            <div class="title">4、商标分析</div>
            <brand :PdfType="PdfType" :companyInfoIndustry="companyInfoIndustry"></brand>
            <div class="title">5、其他知产</div>
            <other :PdfType="PdfType" :companyInfoIndustry="companyInfoIndustry"></other>
            <div class="title">6、知产纠纷</div>
            <dispute :PdfType="PdfType" :companyInfoIndustry="companyInfoIndustry"></dispute>
          </div>
        </div>
      </div>
    </el-main>
  </div>
</template>

<script>
import businessInfo from "./businessInfo.vue";
import enterpriseHonor from "./enterpriseHonor.vue";
import patent from "./patent.vue";
import brand from "./brand.vue";
import { htmlPdf } from "@/utils/pdf.js";
import other from "./other.vue";
import dispute from "./dispute.vue";
import { getToken } from "@/utils/auth";
import htmlDocx from 'html-docx-js/dist/html-docx';
import saveAs from 'file-saver';
import {
  loginInfo,
  currency,
  companyTianynchaRefresh
} from "@/api/newuser";
import {
  backsteppingInfo,
  companyInfo,
  companydetail,
  visitHonor,
} from "@/api/configApi"
export default {
  data() {
    return {
      PdfType: false,
      PdfType2: false,
      companyInfoIndustry: {},
      getToken: getToken() || sessionStorage.getItem("token"),
      tokenIfon: sessionStorage.getItem("token"),
      companyInfos: {},
      infodata: {},
      company_id: "",
      data: {},
      tags: [],
      url: "http://open.api.tianyancha.com/services/open/ic/baseinfo/normal",
      type: "web",
      status_update: 0,
      honor_know: {}
    };
  },
  watch: {},
  filters: {
    //时间戳转换
    time(date) {
      date = new Date(date);
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      var d = date.getDate();
      d = d < 10 ? "0" + d : d;
      return y + "-" + m + "-" + d;
    },
  },
  props: {},
  components: {
    enterpriseHonor,
    patent,
    brand,
    other,
    dispute,
    businessInfo,
  },
  async mounted() {
    // let res = await loginInfo({
    //   account: "shunqi",
    //   password: "123456",
    //   Authorization: this.getToken,
    // });
    // this.tokenIfon = res.token;

    this.company_id = this.$route.query.company_id;
    this.backsteppingInfo();
    this.visitHonor()
    companyInfo({
      company_id: this.company_id,
    }).then((res) => {
      this.companyInfos = res.res;
      this.infodata = res;
      if (this.companyInfos.company) {
        companydetail({ company: this.companyInfos.company }).then((res) => {
          if (res) {
            this.data = res;
            this.tags = this.data.tags.split(";");
          } else {
            this.currency();
          }
        });
      }
    });
  },
  methods: {
    visitHonor() {
      visitHonor({
        company_id: this.company_id,
      }).then(res => {
        console.log(res, 'asdasdgaudg');
        this.honor_know = res
      })
    },
    async loadPdf2() {
      this.PdfType2 = true;
      await htmlPdf("企业基本信息", this.$refs.pdfBox);
      this.PdfType2 = false;
      return;
    },
    async loadPdf() {
      this.PdfType = true;
      // await htmlPdf("企业基本信息", this.$refs.pdfBox);
      // this.PdfType = false;
      // return;
      this.$nextTick(() => {
        let contenthtml = this.$refs.pdfBox.innerHTML
        contenthtml = contenthtml.replace(/break-(after|before): page/g, 'page-break-$1: always;')

        let cssHTML = `
        
        .titleBig {
          font-size: 36px;
          margin-top: 30px;
          font-weight: bold;
        }
        body {
          font-family: 'FangSong', 'STFangsong', serif; /* 指定仿宋字体及其备选字体 */
        }
        .company_title {
          font-weight: bolder;
          font-size: 24px;
          margin-bottom: 5px;
          position: relative;
          margin-top: 50px;
        }
        .time {
          margin: 20px 0;
          font-size: 18px;
        }
        .title {
          margin-bottom: 20px;
          font-size: 22px;
          margin-top: 30px;
          font-weight: bold;
        }
        table {
          width: 100%;
          border: 1px solid #ebeef5;
          border-collapse: collapse;
        }

        .tableTr {
        }
        .tableTh {
          background-color: #4e81f6;
          color: #fff;
          font-weight: bold;
          border: 1px solid #ebeef5;
          border-collapse: collapse;
          font-size: 20px;
          padding: 10px;
        }
        .tableTd {
          font-size: 20px;
          color: #000;
          width: 100%;
          border: 1px solid #c3c3c3;
          border-collapse: collapse;
        }
        .leftTitle {
          padding: 20px;
          display: inline-block;
          background-color: #e5e5e5;
          font-weight: bold;
          color: black;
          border-right: 1px solid #c3c3c3;
        }

        .leftTitle2 {
          padding: 20px;
          display: inline-block;
          background-color: #e5e5e5;
          font-weight: bold;
        }
        .infoTr {  
          color: #606266;
          border-collapse: collapse; /* 合并边框 */
          text-align: left;
        }
        .infoTb {
          text-align: left;
          font-size: 20px;
          border: 1px solid #c3c3c3;
          line-height: initial;
          // font-weight: bold;
          border-collapse: collapse; /* 合并边框 */
        }
        .infoTb2 {
          text-align: left;
          font-size: 20px;
          font-weight: bold;
          line-height: initial;
          background-color: #e5e5e5;
          color: black;
        }
        .infoS {
          padding: 20px;
          font-weight: initial;
        }
        .b_bule {
          display: inline-block;
          margin: 3px 5px;
          border-radius: 5px;
          padding: 0px 10px;
          color: #387dff;
          font-size: 20px !important;
          height: 20px;
          line-height: 20px;
          font-weight: initial;
          cursor: pointer;
          border: none;
        }
        .b_color {
          color: #109421 !important;
          background-color: #c2f9c9 !important;
          display: inline-block;
          margin: 3px 5px;
          border-radius: 5px;
          padding: 0px 10px;
          font-size: 16px !important;
          height: 20px;
          font-weight: initial;
          line-height: 20px;
          cursor: pointer;
          border: none;
        }
        .b_red2 {
          color: #ffffff !important;
          background-color: #ff5f58 !important;
          display: inline-block;
          margin: 3px 5px;
          border-radius: 5px;
          padding: 0px 10px;
          font-size: 16px !important;
          height: 20px;
          font-weight: initial;
          line-height: 20px;
          cursor: pointer;
          border: none;
        }
        .b_red {
          color: #ff5f58 !important;
          background-color: #fff6f5 !important;
          display: inline-block;
          margin: 3px 5px;
          border-radius: 5px;
          padding: 0px 10px;
          font-size: 16px !important;
          font-weight: initial;
          height: 20px;
          line-height: 20px;
          cursor: pointer;
          border: none;
        }
        .item {
          font-size: 20px;
          color: #afb0b0;
          margin-right: 55px;
          margin-bottom: 20px;
        }
        .have {
          color: #377fff;
          font-weight: bold;
          font-size: 20px;
          margin-right: 55px;
          margin-bottom: 20px;
          display: inline-block;
        }
        .legendText {
          text-align: center;
          font-size: 14px;
          margin-top: 20px;
          margin-bottom: 5px;
          font-family: "SimSun", "宋体", sans-serif;
        }
        .title_small {
          font-size: 16px;
          font-weight: bold;
          margin: 30px 0 20px 0;
        }
        .newinstitutionName {
          
          font-size: 14px;
        }
        .span1 {
          background-color: #ff5f59;
          border-radius: 2px;
          color: #fff;
          font-size: 11px;
          padding: 0px 3px;
          margin-left: 5px;
          box-sizing: border-box;
          display: inline-block;
        }
        .span2 {
          background-color: #2e9a3c;
          border-radius: 2px;
          color: #fff;
          font-size: 11px;
          padding: 0px 3px;
          margin-left: 5px;
          box-sizing: border-box;
          display: inline-block;
        }
        `
        let content =
          `<!DOCTYPE html>
          <html>
          <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <style>
              ${cssHTML}
            </style>
          </head>
          <body>
          `
        content +=
          `
          ${contenthtml}
        `
        content += '</body></html>'
        const options = {
          orientation: 'portrait', // 页面方向，可选 'portrait' 或 'landscape'
          pageBreaks: true, // 是否在段落后添加分页符
          pageMargins: [1, 1, 1.5, 1.5], // 页边距（上，下，左，右）以英寸为单位
          pageBreakSelector: 'h1', // 触发分页的CSS选择器，默认为'h1'
          pageNumberSelector: '.page-number', // 页码选择器，默认为无
          pageNumberStart: 1, // 页码起始值，默认为1
          pageNumberStyle: 'decimal', // 页码样式，默认为'decimal'（十进制）
          pageNumberResetSelector: 'h1', // 重置页码的选择器，默认为无
        };
        let converted = htmlDocx.asBlob(content, options)
        saveAs.saveAs(converted, '背景调查报告.docx')


        this.PdfType = false;
      })
    },
    currency() {
      companyTianynchaRefresh({
        company_id:this.companyInfos.id
      }).then((res) => {
        console.log(res,'天眼查刷新');
        // this.$emit("update");
      });
      // currency({
      //   url: this.url,
      //   params: JSON.stringify({
      //     keyword: this.companyInfos.company,
      //   }),
      //   inter_id: 1116,
      //   token: this.tokenIfon,
      // }).then((res) => {
      //   this.data = res;
      //   this.tags = this.data.tags.split(";");
      // });
    },
    backsteppingInfo() {
      backsteppingInfo({
        company_id: this.company_id,
      }).then((res) => {
        console.log(res, "adasd");
        this.companyInfoIndustry = res;
      });
    },
  },
};
</script>

<style scoped lang="less">
.tableTd {
  width: 100%;
  border: 1px solid #c3c3c3;
  border-collapse: collapse;
}

.leftTitle {
  padding: 20px;
  display: inline-block;
  background-color: #e5e5e5;
  font-weight: bold;
  border-right: 1px solid #c3c3c3;
}

.leftTitle2 {
  padding: 20px;
  display: inline-block;
  background-color: #e5e5e5;
  font-weight: bold;
}

.infoS {
  padding: 20px;
}

.infoTb {
  border: 1px solid #c3c3c3;
  line-height: initial;
}

.infoTb2 {
  text-align: left;
  line-height: initial;
  background-color: #e5e5e5;
}


.time {
  margin: 20px 0;
  font-size: 14px;
}

.company_title {
  font-weight: bolder;
  font-size: 24px;
  margin-bottom: 5px;
  position: relative;
  margin-top: 50px;
}

.share {
  .box {
    display: flex;
    justify-content: center;

    .itemBox {
      width: 700px;

      .question {
        border: 2px solid #f5f6fa;
        padding: 0px 30px 25px 30px;
        border-radius: 10px;
        margin: 10px 0;

        .title {
          margin-bottom: 20px;
          font-size: 22px;
          margin-top: 30px;
          font-weight: bold;
        }
      }
    }
  }
}

.el-main {
  // margin: 20px 15px;
}

.titleBig {
  font-size: 36px;
  margin-top: 30px;
  font-weight: bold;
}

@media (max-width: 1360px) {}

@media (max-width: 1280px) {}

@media (max-width: 768px) {
  .share .box .itemBox {
    width: 100%;
  }
}
</style>
